<div class="container" data-ng-controller="tableCtrl as tctrl">

    <div class="block-header">
        <h2>Data Tables<small>ng-table is a powerfull AngularJs ready Data Table with tons of customizable options. Read more <a target="_blank" href="http://ng-table.com/#/">here</a> for detailed documentation and HowTos...</small></h2>

        <ul class="actions m-t-20 hidden-xs">
            <li class="dropdown" uib-dropdown>
                <a href="" uib-dropdown-toggle>
                    <i class="zmdi zmdi-more-vert"></i>
                </a>

                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a href="">Privacy Settings</a>
                    </li>
                    <li>
                        <a href="">Account Settings</a>
                    </li>
                    <li>
                        <a href="">Other Settings</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h2>Basic Examples <small>With lease settings enabled.</small></h2>
        </div>
                
        <div class="card-body">
            <div class="table-responsive">
                <table ng-table="tctrl.tableBasic" class="table table-striped table-vmiddle">
                    <tr ng-repeat="w in $data">
                        <td data-title="'ID'">
                            {{ w.id }}
                        </td>
                        <td data-title="'Name'">
                            {{ w.name }}
                        </td>
                        <td data-title="'Email'">
                            {{ w.email }}
                        </td>
                        <td data-title="'Username'">
                            {{ w.username }}
                        </td>
                        <td data-title="'Contact'">
                            {{ w.contact }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h2>Column Sorting <small>Click on columns header to sort the table.</small></h2>
        </div>
                
        <div class="card-body">
            <div class="table-responsive">
                <table ng-table="tctrl.tableSorting" class="table table-striped table-vmiddle">
                    <tr ng-repeat="w in $data">
                        <td data-title="'ID'" sortable="'id'">
                            {{ w.id }}
                        </td>
                        <td data-title="'Name'" sortable="'name'">
                            {{ w.name }}
                        </td>
                        <td data-title="'Email'" sortable="'email'">
                            {{ w.email }}
                        </td>
                        <td data-title="'Username'" sortable="'username'">
                            {{ w.username }}
                        </td>
                        <td data-title="'Contact'" sortable="'contact'">
                            {{ w.contact }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h2>Column Filtering <small>Type something in filter and press Enter or Filter button</small></h2>
        </div>
                
        <div class="card-body">
            <div class="table-responsive">
                <table ng-table="tctrl.tableFilter" class="table table-striped table-vmiddle" show-filter="true">
                    <tr ng-repeat="w in $data">
                        <td data-title="'ID'" filter="{ 'id': 'text' }">
                            {{ w.id }}
                        </td>
                        <td data-title="'Name'" filter="{ 'name': 'text' }">
                            {{ w.name }}
                        </td>
                        <td data-title="'Email'" filter="{ 'email': 'text' }">
                            {{ w.email }}
                        </td>
                        <td data-title="'Username'" filter="{ 'username': 'text' }">
                            {{ w.username }}
                        </td>
                        <td data-title="'Contact'" filter="{ 'contact': 'text' }">
                            {{ w.contact }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h2>Editable <small>Click on Pencil icon to edit a row.</small></h2>
        </div>
                
        <div class="card-body">
            <div class="table-responsive">
                <table ng-table="tctrl.tableEdit" class="table table-striped table-vmiddle">
                    <tr ng-repeat="w in $data"  ng-class="{ 'active': w.$edit }">
                        <td data-title="'ID'">
                            <span ng-if="!w.$edit">{{ w.id }}</span>
                            <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.id" /></div>
                        </td>
                        <td data-title="'Name'">
                            <span ng-if="!w.$edit">{{ w.name }}</span>
                            <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.name" /></div>
                        </td>
                        <td data-title="'Email'">
                            <span ng-if="!w.$edit">{{ w.email }}</span>
                            <div ng-if="w.$edit"><input class="form-control" type="email" ng-model="w.email" /></div>
                        </td>
                        <td data-title="'Username'">
                            <span ng-if="!w.$edit">{{ w.username }}</span>
                            <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.username" /></div>
                        </td>
                        <td data-title="'Contact'">
                            <span ng-if="!w.$edit">{{ w.contact }}</span>
                            <div ng-if="w.$edit"><input class="form-control" type="text" ng-model="w.contact" /></div>
                        </td>
                        <td data-title="'Actions'">
                            <button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="w.$edit = true"><i class="zmdi zmdi-edit"></i></button>
                            <button type="button" class="btn btn-success" ng-if="w.$edit" ng-click="w.$edit = false"><i class="zmdi zmdi-check"></i></button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>        
</div>


